body {
  background: url("https://sakihomura.gitee.io/homura_s_blog/img/bgimg.jpg")
    no-repeat fixed top;
  background-size: cover;
}
// css属性书写顺序, 建议遵循
// 布局定位属性-->自身属性-->文本属性-->其他属性

// 搜索栏
.search {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);

  width: 500px;
  height: 40px;
  background: rgba(238, 238, 241, 0.72);
  border-radius: 5px;

  #search_input {
    padding-left: 12px;
    width: 500px;
    height: 40px;
    background: none;
    border-radius: 5px;
    color: #555;
    font-size: 18px;
    transition: 0.1s;
  }
  #search_input:hover,
  #search_input:focus {
    background: rgb(238, 238, 241);
  }

  .search_button {
    position: absolute;
    right: 3px;
    top: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    outline: none;
  }
  .search_button::after {
    content: "\e900";
    font-family: "icomoon";
    font-size: 24px;
    cursor: pointer;
  }
}

// 书签栏
.bookmark {
  position: absolute;
  top: 315px;
  left: 50%;
  transform: translateX(-50%);

  width: 798px;

  li {
    position: relative;
    float: left;
    width: 150px;
    height: 150px;
    margin-top: 10px;
    margin-right: 12px;
    background-color: #eeeeee90;

    a {
      display: block;
      width: 100%;
      height: 100%;

      span {
        position: absolute;
        left: 50%;
        bottom: 3px;
        transform: translateX(-50%);
      }
    }
  }
}

// 移动端适配
@media screen and (min-width: 1000px) {
  li:nth-child(5n) {
    margin-right: 0;
  }
}
// 1000:中间书签栏缩小到每行4个
@media screen and (max-width: 1000px) and (min-width: 800px) {
  .bookmark {
    width: 636px;
    li:nth-child(4n) {
      margin-right: 0;
    }
  }
}
// 800:
@media screen and (max-width: 800px) and (min-width: 600px) {
  .bookmark {
    width: 474px;
  }
  li:nth-child(3n) {
    margin-right: 0;
  }
}
// 600：变樱花壁纸
@media screen and (max-width: 600px) {
  body {
    background: url("https://sakihomura.gitee.io/homura_s_blog/img/phone_bgimg.jpg")
      no-repeat fixed top;
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  .search {
    top: 8%;
    #search_input {
      width: 100%;
    }
    width: 80%;
  }
  .bookmark {
    width: 90%;
    top: 20%;
    ul {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    li {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      span {
        width: 90%;
        text-align: center;
      }
    }
  }
}
